﻿{% extends "base/base.html" %}
{% load staticfiles %}

{% block customizedCSS %}
    <!-- this page specific styles -->
    <link rel="stylesheet" href="/static/css/compiled/user-list.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="/static/css/kkpager_blue.css">

    <style type="text/css">
    *{font-family:'Microsoft YaHei';}
    .name{display: block;font-weight: 600;font-size: 14px;
        margin:15px 0 0 0;}
    </style>
{% endblock %}

{% block content %}
<div class="container-fluid">
                <div id="pad-wrapper" class="users-list">
                    <div class="row-fluid header">
                        <h3>客户列表</h3>
                        <div class="span10 pull-right">
                            <input type="text" class="span5 search" id="query" placeholder="输入想要查询的客户名..." value="{{query}}"/>
                            <!-- custom popup filter -->
                            <!-- styles are located in css/elements.css -->
                            <!-- script that enables this dropdown is located in js/theme.js -->
                            <input type="button" class="btn-glow" id="btn_search" value="开始查询" title="点击查询" style="height: 30px;line-height: 20px;" />
                            <a href="/customer/new/" class="btn-flat success pull-right">
                                <span>&#43;</span>
                                 新建客户
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Users table -->
                <div class="row-fluid table">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th class="span1 sortable">
                                    客户名
                                </th>
                                <th class="span1 sortable">
                                    <span class="line"></span>客户类型
                                </th>
                                <th class="span1 ">
                                    <span class="line"></span>联系电话
                                </th>
                                <th class="span1">
                                    <span class="line"></span>QQ
                                </th>
                                <th class="span1">
                                    <span class="line"></span>微信
                                </th>
                                <th class="span1 sortable">
                                    <span class="line"></span>创建时间
                                </th>
                                <th class="span2">
                                <span class="line"></span>地址 
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for item in list %}
                            <!-- row -->
                            <tr class="first">
                                <td>
                                    <img src="/static/img/contact-img.png" class="img-circle avatar hidden-phone" style="float: left;margin-right: 14px;max-width: 45px;position: relative;top: 8px;">
                                    <a href="/customer/detail/?cust_id={{ item.id }}" class="name">{{item.account_name}}</a>
                                </td>
                                <td>
                                    {% if item.level %}
                                            {% if  item.level == 1 %}
                                            普通客户
                                            {% elif  item.level == 2 %}
                                            长期客户
                                            {% elif  item.level == 3 %}
                                            VIP客户
                                            {% else %}
                                            潜在客户
                                            {% endif %}
                                    {% endif %}
                                </td>
                                <td>
                                    {{item.phone}}
                                </td>
                                <td>
                                    {{item.qq}}({{item.qq_nickname}})
                                    
                                </td>
                                <td>
                                    {{item.weixin}}({{item.weixin_nickname}})
                                </td>
                                <td>
                                    {{item.created_date}}
                                </td>
                                <td>{{item.province}}&nbsp;{{item.city}}&nbsp;{{item.area}}&nbsp;{{item.street}}</td>
                            </tr>
                            <!-- row -->
                        {%endfor%}
                        </tbody>
                    </table>
                </div>
                <div class="pagination pull-right" id="kkpager">
                </div>
                <!-- end users table -->
            </div>
{% endblock %}

{% block customizedJS %}
<script src="/static/js/kkpager.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#btn_search").click(function(){
                var query=$("#query").val();
                if(query!=""){
                    window.location.href="/customer/list/?query="+query
                } else{
                    window.location.href="/customer/list/"
                }
            });
        });

        function getParameter(name) { 
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); 
            var r = window.location.search.substr(1).match(reg); 
            if (r!=null) return unescape(r[2]); return null;
        }

        $(function(){
            var totalPage ={{totalPage}};
            var totalRecords ={{totalRecords}};
            var pageNo = getParameter('page');
            var query="{{query}}";
            var latter="";
            if(!pageNo){
                pageNo = 1;
            }
            if(query=="None"){
                latter="";
            }
            //生成分页
            //有些参数是可选的，比如lang，若不传有默认值
            kkpager.generPageHtml({
                pno : pageNo,
                //总页码
                total : totalPage,
                //总数据条数
                totalRecords : totalRecords,
                //链接前部
                hrefFormer : '/cust-list/',
                //链接尾部
                hrefLatter : '?query='+latter,
                getLink : function(n){
                    return this.hrefFormer + this.hrefLatter + "&page="+n;
                }
            });
        });
    </script>
{% endblock %}